<template>
  <div class="add-store">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="5" :lg="7" :md="12" :sm="24" :xs="24">
        <el-form :model="addForm" :rules="rules" ref="addForm" label-width="70px" size="small">
            <el-form-item prop="store_name" label="门店名称">
              <el-input class="w240" placeholder="门店名称不能超过25个字符" v-model="addForm.store_name" :maxlength="25"></el-input>
            </el-form-item>
            <el-form-item prop="store_number" label="门店编号">
              <el-input class="w240" placeholder="输入门店编号" v-model="addForm.store_number"></el-input>
            </el-form-item>
            <el-form-item prop="store_area" label="选择区域">
              <el-cascader class="w240" :options="options" :props="props" change-on-select v-model="addForm.store_area" clearable></el-cascader>
            </el-form-item>
            <el-form-item prop="store_address" label="门店地址">
              <el-input class="w240" placeholder="请填写门店具体地址" v-model="addForm.store_address"></el-input>
            </el-form-item>
            <el-form-item label="门店状态" prop="store_status">
              <el-radio-group v-model="addForm.store_status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">未营业</el-radio>
              </el-radio-group>
            </el-form-item>
        </el-form>
        <el-button type="primary fr" @click="submit">保存资料</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { addStoreSubmit, areaAddress } from '@/api/shop'
import { mapGetters } from 'vuex'

export default {
  name: 'addStore',
  components: {
    Breadcrumb
  },
  data() {
    const validateUndefined = (rule, value, callback) => {
      if (value === undefined || value === '' || value === null) {
        callback(new Error('不能为空哟'))
      } else {
        callback()
      }
    }
    return {
      options: [],
      addForm: {
        store_name: '',
        store_number: '',
        store_area: [],
        store_address: '',
        store_status: 1
      },
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      rules: {
        store_name: [{ required: true, trigger: 'blur', validator: validateUndefined }],
        store_number: [{ required: true, trigger: 'blur', validator: validateUndefined }],
        store_area: [{ required: true, trigger: 'change', message: '必须选择哟~' }],
        store_address: [{ required: true, trigger: 'blur', message: '必须填写哟~' }],
        store_status: [{ required: true, trigger: 'change', message: '必须选择哟~' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    areaAddress().then(response => {
      this.options = response.data.result
    })
  },
  methods: {
    submit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          addStoreSubmit(this.$route.query.merchant_id, this.addForm).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success(response.data.errorMsg)
              this.$refs['addForm'].resetFields()
              this.$router.go(-1)
            } else {
              this.$message.error(response.data.errorMsg)
            }
          })
        }
      })
    }
  }
}
</script>